<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 雷达
 * @LastEditTime: 2021-11-26 14:31:58
 * @FilePath: \tianjushi-kanban\src\components\charts\Radar1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba} from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    unit: {
      type: String,
      default: "次",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
      { name: 'a', max: 100, value:43 },
      { name: 'b', max: 100, value:23},
      { name: 'c', max: 100,  value:43 },
      { name: 'd', max: 100,  value:43},
      { name: 'e', max: 100,  value:43},
    ],
    },
    color:{
      type:Array,
     default:['#35F3FF','#0A5BDE']
    },
    fontSize: {
      default: 16,
      type: Number,
    },
     min: {
      default: null,
      type: Number,
    },
     max: {
      default: null,
      type: Number,
    },

  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });
 

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => { 
      let   everyDepartment = {
    stages: props.chartdata
  };

  let scores = [] ;
  everyDepartment.stages.forEach((x)=>{
    scores.push(x.value)
  })
  

  function contains(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i].name === obj) {
          return i;
        }
      }
      return false;
    }
     
const option = { 
      color: [props.color[0]],
      radar: {
        center: ['50%', '50%'],
        radius: '75%',
        triggerEvent: true,
        splitNumber: 4,
        name: {
          rich: {
            num: {
              fontSize: props.fontSize,
              color: '#0079FE',
              fontWeight: 700,
              padding: [0, 0, 0, 15],
            },
            a: {
              fontSize: props.fontSize,
              color: '#ccc',
              lineHeight: '40',
              align: 'left'
            },
            b: {
              color: '#00E4FF',
              fontSize: props.fontSize,
              fontWeight: 700,
              padding: [0, 0, 0, 10],
              align: 'right'
            },
            c: {
              color: '#fff',
              fontSize: props.fontSize,
            },
            d: {
              color: props.color[0],
              fontSize: props.fontSize,
              padding: [0, 15, 0, 0],
              align: 'right'
            },
            triggerEvent: true,
          },
          formatter: (a, index) => { 
            let values = a.length > 6 ? a.slice(0, 6) + '...' : a;
            let i = contains(everyDepartment.stages, a); // 处理对应要显示的样式
            return `{a| ${values}}\n{d| ${everyDepartment.stages[i].value}${props.unit}}`;
          },
        },
        nameGap: '2',
        indicator: everyDepartment.stages,
        splitArea: {
          show: false,
        },
        // axisLabel:{//展示刻度
        //     show: true
        // },
        axisLine: {
          //指向外圈文本的分隔线样式
          lineStyle: {
            color: props.color[1],
            width: 2,
          },
        },
        splitLine: {
          lineStyle: {
            width: 2,
            color: props.color[1],
          },
        },
      },

      series: [
        {
          type: 'radar',
          symbolSize: 10,
          data: [
            {
              value: scores,
              name: '',
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: props.color[0],
                  },
                  shadowColor: props.color[0],
                  shadowBlur: 20,
                },
              },
              areaStyle: {
                normal: {
                  color: hexToRgba(props.color[0],0.3),
                },
              },
            },
          ],
        },
      ],
    };

      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>